<h3>描述</h3>
<p>开发者可参考该示例实现表格售罄场景</p>
<h3>示例</h3>

<ti-table [(displayedData)]="displayed" [srcData]="srcData" [columns]="columns">
  <table>
    <thead>
      <tr>
        <!--使用复选框时，需要给复选框列加 checkbox-column 属性-->
        <th checkbox-column>
          <!--全选按钮-->
          <!--如果有分页，全选需要控制当前页时，items接口传入displayed
                        如果全选要控制表格所有数据，items接口传入srcData.data-->
          <input type="checkbox" tiCheckgroup [items]="displayed" [(checkeds)]="checkedList" />
        </th>
        <th tiOverflow>{{columns[1].title}}</th>
        <th tiOverflow>{{columns[2].title}}</th>
        <th tiOverflow>{{columns[3].title}}</th>
        <th tiOverflow>{{columns[4].title}}</th>
      </tr>
    </thead>
    <tbody>
      <!--注意:ngFor中的displayed数据与displayedData传入的数据一致, 初始化设置为[]即可-->
      <!--为了更好的渲染性能，建议在ngFor数据时总是trackBy数据条目中的某个唯一属性值(如id)-->
      <tr
        *ngFor="let row of displayed;index as i;trackBy: trackByFn"
        [ngClass]="{'ti3-selected-tr': checkedList.indexOf(row) !== -1,
                            'ti3-disabled-tr':row.message.class === 'ti3-table-row-message-soldout'}"
      >
        <!--使用复选框时，需要给复选框列加 checkbox-column 属性-->
        <td checkbox-column>
          <input type="checkbox" tiCheckitem [item]="row" *ngIf="row.message.class !== 'ti3-table-row-message-soldout'" />
          <span *ngIf=" row.message.class === 'ti3-table-row-message-soldout' " class="ti3-table-soldout"></span>
        </td>
        <td tiOverflow>
          {{row.lastName}}<span *ngIf="row.message.class !== 'ti3-table-row-message-soldout'" [ngClass]="row.message.class">
            <ti-icon *ngIf="row.message.iconName" [name]="row.message.iconName"></ti-icon>{{row.message.text}}</span
          >
        </td>
        <td tiOverflow>{{row.age}}</td>
        <td tiOverflow>{{row.balance | currency}}</td>
        <td tiOverflow>{{row.email}}</td>
      </tr>
    </tbody>
  </table>
</ti-table>
